<template>
  <div class="container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="基本信息" name="basicInfo">
        <BasicInfoForm
          ref="basicInfoRef"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
        />
      </el-tab-pane>
      <el-tab-pane label="价格库存" name="sku">
        <SkuForm
          ref="skuRef"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
          :category_id="formData.category_id"
        />
      </el-tab-pane>
      <el-tab-pane label="商品详情" name="description">
        <DescriptionForm
          ref="descriptionRef"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
        />
      </el-tab-pane>
      <el-tab-pane label="其它设置" name="other">
        <OtherForm
          ref="otherRef"
          @updateActiveTab="updateActiveTab"
          :propFormData="formData"
        />
      </el-tab-pane>
    </el-tabs>
    <div class="footer">
      <el-button :loading="formLoading" type="primary" @click="submitForm">保存</el-button>
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>
<script>
import BasicInfoForm from './BasicInfo'
import DescriptionForm from './Description'
import OtherForm from './Other'
import SkuForm from './Sku'
import * as API_Goods from '@/api/goods'

export default {
  name: 'goodsEditForm',
  components: { BasicInfoForm, DescriptionForm, OtherForm, SkuForm },
  data() {
    return {
      activeTab: 'basicInfo', // tab激活的窗口
      formLoading: false,
      formData: {}, // 表单数据
      id: null // 商品id
    }
  },
  methods: {
    /** 初始化 */
    init() {
      const { id } = this.$route.params
      if (id) {
        this.id = id
        this.GET_GoodsDetail()
      }
    },
    /** 查询商品详情 */
    async GET_GoodsDetail() {
      this.formData = await API_Goods.getGoodsInfo(this.id)
    },
    /** 提交表单 */
    async submitForm() {
      this.formLoading = true
      try {
        // 校验各表单
        await this.$refs.basicInfoRef.validateForm()
        await this.$refs.skuRef.validateForm()
        await this.$refs.descriptionRef.validateForm()
        await this.$refs.otherRef.validateForm()
        // 深拷贝一份数据
        const formDataCopy = this.MixinClone(this.formData)
        if (this.id) {
          await API_Goods.editGoods(this.id, formDataCopy)
          this.$message.success('修改成功')
        } else {
          await API_Goods.addGoods(formDataCopy)
          this.$message.success('添加成功')
        }
        this.back()
      } finally {
        this.formLoading = false
      }
    },
    /** 返回商品列表 */
    back() {
      this.$store.dispatch('delCurrentViews', {
        view: this.$route,
        $router: this.$router
      })
      this.$router.push({name: 'goodsList'})
    },
    /** 更新激活的tab */
    updateActiveTab(activeTab) {
      this.activeTab = activeTab
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (newVal.name === 'goodsAddForm' || newVal.name === 'goodsEditForm') {
          this.init()
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  margin: 10px;
  padding: 25px;
}
.footer {
  text-align: center;
  margin-top: 10px;
}
</style>
